<template>
    <div>
        <input placeholder="输入关键字搜索" v-model="keyword" @keydown="handleSearch" @input="handleSearch" />
        <table class="my-table">
            <thead>
                <tr>
                    <th>就诊日期</th>
                    <th>医生姓名</th>
                    <th>诊断结果</th>
                    <th>处方信息</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td>{{ item.date }}</td>
                    <td>{{ item.doctor }}</td>
                    <td>{{ item.diagnosis }}</td>
                    <td>{{ item.prescription }}</td>
                    <td @click="handleDetail(item.doctor)">详情</td>
                </tr>
            </tbody>
        </table>
        <infoList :infoDetail="infoDetail" v-show="isShow" @close="close" />

    </div>
</template>

<script>
import infoList from './infoList'
export default {
    name: "searchList",
    props: {
        records: Array
    },
    data() {
        return {
            infoDetail: {},
            isShow: false,
            keyword: '',
            list: this.records
        }
    },
    components: {
        infoList
    },
    methods: {
        handleDetail(name) {
            this.infoDetail = this.records.filter(item => item.doctor === name)[0]
            this.isShow = true
        },
        close() {
            this.isShow = false
        },
        handleSearch() {
            this.list = this.records.filter(item => item.doctor.includes(this.keyword))
        }
    }
}
</script>

<style scoped>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>
